<template>
  <view>
    <!-- 搜索组件 -->
    <view class="search">
      <my-search @click.native="goSearch"></my-search>
    </view>
    <!-- 轮播图区域 -->
    <swiper indicator-dots indicator-color="#fff" indicator-active-color="#000" circular autoplay @click="goDetail">
      <swiper-item class="swiper-item" v-for="it in bannerList" :key="it.goods_id" :data-info="it.goods_id">
        <image class="swipe-img" :src="it.image_src" :data-info="it.goods_id"></image>
      </swiper-item>
    </swiper>
    <!-- 导航栏 -->
    <view class="nav">
      <view class="item" v-for="(it,i) in navList" :key="i" @click="navjump(it)">
        <image class="nav-img" :src="it.image_src"></image>
      </view>
    </view>
    <!-- 楼层渲染 -->
    <view class="floor">
      <!-- 楼层标题 -->
      <view class="floor_item" v-for="(it,i) in floorList" :key="i">
        <image :src="it.floor_title.image_src" class="floor_title"></image>
        <!-- 楼层列表数据渲染 -->
        <view class="container_box" @click="floorjump">
          <!-- 左侧大图 -->
          <view class="left">
            <image :src="it.product_list.left[0].image_src" :style="{width:it.product_list.left[0].image_width + 'rpx'}" :data-url="it.product_list.left[0].url" mode="widthFix"></image>
          </view>
          <!-- 右侧小图 -->
          <view class="right">
            <view class="img" v-for="(item,idx) in it.product_list.right" :key="idx">
              <image :src="item.image_src" :data-url="item.url" :style="{width:item.image_width + 'rpx'}"  mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {getBannerList,getNavList,getFloorList} from '../../utils/api.js'
  export default {
    data() {
      return {
        // 轮播图
        bannerList:[],
        // 导航栏列表
        navList:[],
        // 楼层列表
        floorList:[]
      };
    },
    watch:{
      floorList(newVal){
        if(newVal){
          newVal.forEach(item => {
            item.product_list.forEach(it => {
              it.url = '/subpkg/goods_list/goods_list?' + it.navigator_url.split('?')[1]
            })
            const left = item.product_list.splice(0,1)
            const right = item.product_list
            item.product_list = {left,right}
          })
          // console.log(newVal)
          this.floorList = newVal
        }
      }
    },
    onLoad(){
      this.getBannerList()
      this.getNavList()
      this.getFloorList()
    },
    methods:{
      // 获取轮播图
      async getBannerList(){
        try{
          const {data} = await getBannerList()
          this.bannerList = data.message
        }catch(e){
          //TODO handle the exception
        }
      },
      // 获取导航数据
      async getNavList(){
        try{
          const {data} = await getNavList()
          this.navList = data.message
        }catch(e){
          //TODO handle the exception
        }
      },
      // 获取楼层数据
      async getFloorList(){
        try{
          const {data} = await getFloorList()
          this.floorList = data.message
        }catch(e){
          //TODO handle the exception
        }
      },
      // 导航跳转
      navjump(it){
        // console.log(it)
        if(it.open_type){
          uni.switchTab({
            url:"/pages/cate/cate"
          })
        }
      },
      // 楼层跳转
      floorjump(e){
        const url = e.target.dataset.url
        // console.log(url)
        uni.navigateTo({
          url
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .search {
    position: sticky;
    top: 0;
    z-index: 9999;
  }
  // 轮播图
  swiper {
    width: 100%;
    height: 330rpx;
    .swiper-item {
      width: 100%;
      height: 100%;
      .swipe-img {
        width: 100%;
        height: 100%;
      }
    }
  }
  // 导航栏
  .nav {
    display: flex;
    margin: 20rpx;
    .item {
      flex:1;
      .nav-img {
        width: 80%;
        height: 150rpx;
      }
    }
  }
  // 楼层列表
  .floor {
    .floor_item {
      .floor_title {
        width: 100%;
        height: 60rpx;
      }
      .container_box {
        display: flex;
        justify-content: space-around;
        padding-left: 10rpx;
        .right {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-content: space-between;
        }
      }
    }
  }
</style>
